<template>
  <div class="HomeSinger">
    <div class="top">
      <h2>你关注的歌手将展示在这里</h2>
      <p>快速起歌,想听就听！</p>
    </div>
    <div class="main w">
      <!-- 全部和 A-Z -->
      <div class="query">
        <div>
          <span
            :class="item.id == queryObj.initial ? 'active' : null"
            v-for="item in $constant.Singer.EnglishLetters"
            :key="item.id"
            @click="changeQueryObjInitial(item)"
          >
            {{ item.name }}
          </span>
        </div>
        <!-- 地域 -->
        <div>
          <span
            :class="item.id == queryObj.area ? 'active' : null"
            v-for="item in $constant.Singer.SingerArea"
            :key="item.id"
            @click="changeQueryObjArea(item)"
          >
            {{ item.name }}
          </span>
        </div>
        <!-- 歌手类别 -->
        <div>
          <span
            :class="item.id == queryObj.type ? 'active' : null"
            v-for="item in $constant.Singer.SingerType"
            :key="item.id"
            @click="changeQueryObjType(item)"
          >
            {{ item.name }}
          </span>
        </div>
      </div>
      <!-- 具体的内容 -->
      <!-- 遮罩层 -->
      <div v-if="list.length === 0">
        <el-skeleton animated :throttle="500" style="height: 400px">
          <template slot="template">
            <el-skeleton-item
              variant="image"
              style="height: 300px; width: 100%"
            />
            <el-skeleton-item
              variant="p"
              style="height: 30px; width: 100%; margin-top: 8px"
            />
          </template>
        </el-skeleton>
      </div>
      <div class="content" v-else>
        <div
          v-for="item in list"
          :key="item.id"
          @click="toSingerDetailsPage(item.id)"
        >
          <div class="content_item_pic">
            <GlobalImageDeep
              :imgWidth="155"
              :imgHeight="155"
              :url="item.img1v1Url"
            />
          </div>
          <div class="content_item_name">{{ item.name }}</div>
        </div>
      </div>

      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="900"
          :page-size="30"
          @current-change="paginationCurrentChange"
          :current-page="currentPage"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getSingerList } from "../../../../api/singerApi";
export default {
  name: "HomeSinger",
  data() {
    return {
      queryObj: {
        limit: 30, // 返回数量
        offset: 0, // 偏移量 用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值
        type: -1, // 全部，  类别是全部 or 男歌手 or 女歌手 or 乐队
        area: -1, // 那个地区的 歌手
        initial: "", // 按照那个首字母 查找
      },
      list: [],
      currentPage: 1,
    };
  },
  created() {
    this.getSingerList();
  },
  methods: {
    async getSingerList() {
      try {
        const result = await getSingerList(this.queryObj);
        if (result.code === 200) {
          // this.list = result.artists;
          this.list = result.artists;
          console.log(result);
        }
      } catch (error) {}
    },
    // 点击字母
    changeQueryObjInitial(item) {
      this.queryObj.initial = item.id;
      this.currentPage = 0;
      this.getSingerList();
    },
    // 点击 地域
    changeQueryObjArea(item) {
      this.queryObj.area = item.id;
      this.currentPage = 0;
      this.getSingerList();
    },
    // 点击歌手类别
    changeQueryObjType(item) {
      this.queryObj.type = item.id;
      this.currentPage = 0;
      this.getSingerList();
    },
    // 切换页码
    paginationCurrentChange(newPage) {
      console.log(newPage);
      this.list = [];
      this.currentPage = newPage;
      this.queryObj.offset = (newPage - 1) * this.queryObj.limit;
      this.getSingerList();
    },
    // 点击跳转到 歌手详情页面
    toSingerDetailsPage(id) {
      console.log(id);
      this.$router.push(`/singerDetails/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-image {
  img {
    border-radius: 50%;
  }
}
/deep/ .el-pager li.active {
  color: #fff;
  background: @globalColor;
  border-radius: 50%;
  &:hover {
    color: #fff;
  }
}
/deep/ .el-pager li:hover {
  color: @globalColor;
}
.HomeSinger {
  .top {
    height: 376px;
    background: url("../../../../assets/images/singer_bg.jpg") no-repeat
      center/100%;
    text-align: center;
    h2 {
      padding-top: 140px;
      color: #fff;
      font-size: 40px;
      font-weight: normal;
      letter-spacing: 10px;
    }
    p {
      color: #767676;
      font-size: 30px;
    }
  }
  .main {
    padding: 40px 0;
    .query {
      font-size: 16px;
      color: #333;
      padding-bottom: 20px;
      span {
        display: inline-block;
        padding: 2px 8px;
        margin-right: 5px;
        border-radius: 5px;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 20px;
        }
        &.active {
          background-color: @globalColor;
          color: #fff;
        }
      }
      div {
        padding-bottom: 15px;
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 15px;
      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 224px;
        border-radius: 8px;
        background-color: #f8f8f8;
        margin-bottom: 15px;
        .content_item_pic {
          width: 155px;
          height: 155px;
        }
        .content_item_name {
          padding-top: 10px;
          font-size: 14px;

          &:hover {
            color: @globalColor;
            cursor: pointer;
            animation: bounce 1s;
          }
        }
      }
    }
  }
}
</style>
